<!-- 表格svg组件 -->
<template>
  <foreignObject :x="0" :y="0">
    <div id="divtable" class="svgfont" :style="editable?'':'display:none'">
      <svg t="1617786806168" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
        p-id="2926" width="48" height="48">
        <path
          d="M512 896v64h-64v-64h-64v-64h-64v-64h128V512H192v128h-64v-64H64v-64H0v-64h64v-64h64v-64h64v128h256V192H320v-64h64V64h64V0h64v64h64v64h64v64H512v256h256V320h64v64h64v64h64v64h-64v64h-64v64h-64V512H512v256h128v64h-64v64h-64z"
          fill="#ffffff" p-id="2927"></path>
      </svg>
    </div>
    <table border="1" cellpadding="0" cellspacing="0" style="pointer-events: none">
      <tr v-for="(tableDataRowItem,index) in tableDataList" :key="index">
        <td v-for="(tableDataColItem) in tableDataRowItem.cols " :key="tableDataColItem.id" class="tdsvg">
          <div class="add-tag">
            <span>{{ tableDataColItem.val }}</span>
            <input :disabled="!editable" v-model="tableDataColItem.val" class="ainput" size="small" />
          </div>
        </td>
      </tr>
    </table>
  </foreignObject>
</template>
<script>
  export default {
    props: ['tableDataList', 'x', 'y', 'editable'],
    methods: {}
  };

</script>
<style lang="scss" scoped>
  input {
    border: 1px solid rgb(255, 255, 0) !important;
    box-sizing: border-box !important;
    outline: medium !important;
  }

  foreignObject {
    width: 0px;
    height: 0px;
    // position:absolute;
    overflow: visible;
    cursor: pointer;
  }

  foreignObject #divtable {
    position: absolute;
    left: 0;
    top: 0;
    line-height: 20px;
    z-index: 111;
    color: #fff;
    // pointer-events: auto;
    display: none;
    cursor: pointer;
    font-size: 20px;
  }

  foreignObject:hover #divtable {
    pointer-events: none;
    display: block;
  }

  .tdsvg {
    white-space: nowrap;
    background: #fff;
    color: #999;
    text-align: center;
    font-size: 16px;

    .add-tag {
      padding: 0;
      position: relative;
      border: 1px solid rgb(255, 255, 0);

      span {
        display: inline-block;
        height: 100%;
        padding: 0 32px;
      }

      .ainput {
        pointer-events: auto;
        display: inline-block;
        position: absolute;
        left: 0;
        width: 100%;
        height: 100%;
        caret-color: #426BF2;

        ::-webkit-input-placeholder {
          color: #aaa;
        }

        padding: 0 32px;
        color: rgb(255, 255, 0);
        background-color: black;
      }
    }
  }

</style>
